import { Swiper, SwiperSlide } from 'swiper/react'
import { Image } from 'antd-mobile'
import 'swiper/css';
import style from './index.module.scss'
import { Autoplay } from 'swiper/modules';
import { itemType } from './type'

const Swipers = (props: { swiper: [] }) => {
  return (
    <Swiper className={style.swiperBox} slidesPerView={4} autoplay={{ delay: 1500, disableOnInteraction: false }} spaceBetween={30} modules={[Autoplay]} loop={true}>
      {
        props.swiper.map((item: itemType) => {
          return (
            <SwiperSlide key={item.id}>
               <Image src={item.cover_url}></Image>
               <p className={style.title}>{item.title}</p> 
            </SwiperSlide>
          )
        })
      }  
    </Swiper>
  )
}

export default Swipers